<template>
    <div class="carPageWrap" :style="{ height: pageHeight + 'px' }">
        <!-- 收银台title，和返回上一级箭头 -->
        <div class="header">
            <van-icon @click="goBack" name="arrow-left" style="margin: 0 .3rem 0 0" />收银台
        </div>
        <!-- 限时付款容器 -->
        <div class="payWrap">
            <!-- 限时付款 -->
            <div class="limitPayWrap">
                <span class="p1">请您在</span>
                <span class="p2">
                    <van-count-down :time="time" format="HH 时 mm 分 ss 秒" />
                </span>
                <span class="p3">内完成支付</span>
            </div>
            <!-- 付款金额 -->
            <div class="payMoneyNum">
                <span class="spanL">付款金额</span>
                <span class="spanR">
                    ¥{{totalMoney_goodsNum.arr.money}}
                </span>
            </div>
            <!-- 收货地址 -->
            <div class="address">
                <span class="spanL">收货信息：</span>
                <span class="spanR">董**, 159****8346</span>
            </div>
        </div>

        <!-- 请选择付款方式 -->
        <div class="selectPay">请选择付款方式</div>

        <!-- 选择支付方式列表 -->
        <div class="selectPayModeList">
           <ul>
                <li class="icon_1">支付宝</li>
                <li class="icon_2">微信支付</li>
                <li class="icon_3">
                    <span class="spanTop">华为支付</span>
                    <p class="pBottom">
                        首次绑卡最高优惠5元 点击查看详情
                    </p>
                </li>
                <li class="icon_4">
                    <span class="spanTop">银联分期</span>
                    <p class="pBottom">
                        分期支付满2000减100 点击查看详情
                    </p>
                </li>
                <li class="icon_5">
                    <span class="spanTop">花呗分期</span>
                    <p class="pBottom">12期0费率</p>
                </li>
           </ul> 
           <!-- 查看更多支付方式 -->
           <div class="morePaymode">查看更多支付方式<van-icon name="arrow-down" /></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import requestFn from '@/utils/https'
const msg = ref('收银台页面')

// 获取当前页面的高度
let pageHeight = document.documentElement.clientHeight
// console.log(pageHeight)

// 限时付款，倒计时
const time = ref(24 * 60 * 60 * 1000);

// 创建路由对象
const router = useRouter()
const goBack = () => {
    router.push({
        path: '/confirmOrder',
    })
}

// 页面一打开，就直接请求所有商品数量、总价
let totalMoney_goodsNum = reactive({
    arr: []
})
requestFn({
    url: '/mysql_getGoodsMoney',
    method: 'get',
}).then(res => {
    // console.log(res)
    totalMoney_goodsNum.arr = res.data
})

</script>

<style lang="less" scoped>
.carPageWrap {
    background-color: #e2e5e8;
    padding: 0 .5rem;
    .header {
        text-align: left;
        font-size: .6rem;
        margin: 0 .5rem;
        padding: .2rem 0;
        height: 1rem;
    }
    .payWrap {
        background-color: #fff;
        overflow: hidden;
        border-radius: .3rem;
        .limitPayWrap {
            padding: 0 0 0 3rem;
            overflow: hidden;
            margin: .3rem 0;
            .p1, .p2, .p3 {
                float: left;
            }
        }
        .payMoneyNum {
            overflow: hidden;
            clear: both;
            font-size: .4rem;
            .spanL {
                float: left;

            }
            .spanR {
                float: right;
                color: #f00;
            }
        }
        .address {
            overflow: hidden;
            .spanL, .spanR {
                float: left;
                color: rgb(170, 170, 170);
            }
        }
    }

    .selectPay {
        text-align: left;
        font-size: .5rem;
        height: 1rem;
        line-height: 1.2rem;
    }
    .selectPayModeList {
        background-color: #fff;
        border-radius: .3rem;
        padding: .2rem .4rem;
        overflow: hidden;
        ul {
            padding: 0 .3rem;
            li {
                height: 1rem;
                line-height: 1rem;
                font-size: .3rem;
                text-align: left;
                padding: 0 0 0 1.4rem;
                margin-bottom: .6rem;
                position: relative;
                .spanTop {
                    position: absolute;
                    top: -0.2rem;
                    left: 1.4rem;
                }
                .pBottom {
                    position: absolute;
                    bottom: -0.3rem;
                    left: 1.4rem;
                    color: #f00;
                }
            }
            .icon_1 {
                background-image: url('https://res.vmallres.com/ips/mobile/20220630/images/indexBankIcon/ALIPAY.png');
                background-repeat: no-repeat;
                background-size: 1rem;
            }
            .icon_2 {
                background-image: url('https://res.vmallres.com/ips/mobile/20220630/images/indexBankIcon/WXPAY.png');
                background-repeat: no-repeat;
                background-size: 1rem;
            }
            .icon_3 {
                background-image: url('https://res.vmallres.com/ips/mobile/20220630/images/indexBankIcon/SHARELINK.png');
                background-repeat: no-repeat;
                background-size: 1rem;
            }

            .icon_4 {
                background-image: url('https://res.vmallres.com/ips/mobile/20220630/images/indexBankIcon/UNIONPINST.png');
                background-repeat: no-repeat;
                background-size: 1rem;
            }

            .icon_5 {
                background-image: url('https://res.vmallres.com/ips/mobile/20220630/images/indexBankIcon/HUABEI.png');
                background-repeat: no-repeat;
                background-size: 1rem;
            }
        }
    }
}
</style>